<template>
  <div id="indexCard">
    <div class="topBox">
      <img :src="url" alt="" />
    </div>
    <div class="msgBox">
      <div class="top">
        <div class="userIcon">
          <img
            src="https://tsyx-rights-and-interests.oss-cn-hangzhou.aliyuncs.com/icon/petroleum.png"
            alt=""
          />
        </div>
        <div class="userName">
          <p class="name">
            {{ userMsg.nickName }}
          </p>
          <p class="tel">电话 :{{ userMsg.phoneNumber }}</p>
        </div>
        <div class="userCardNum">
          <h3 class="num">{{ allNum }}</h3>
          <p>
            {{
              activeName == 2 ? "未使用" : activeName == 3 ? "已使用" : "已过期"
            }}
          </p>
        </div>
      </div>
      <van-tabs v-model="activeName">
        <van-tab title="未使用" name="2">
          <div
            class="quan"
            v-for="(item, index) in list"
            :key="index"
            @click="toQuan(item)"
          >
            <div class="leftBox">
              <span>￥</span>
              <h3 class="money">{{ item.couponAmount }}</h3>
              <p>优惠券</p>
            </div>
            <div class="midBox">
              <h4>{{ item.couponName }}</h4>
              <p>{{ item.remarks }}</p>
              <div>有效使期至：{{ item.expiredDate }}</div>
            </div>
            <div class="rightBox">
              <div class="bottomToMsgQuan">扫码使用</div>
            </div>
          </div>
        </van-tab>
        <van-tab title="已使用" name="3">
          <div class="quan" v-for="(item, index) in list" :key="index">
            <div class="leftBox">
              <span>￥</span>
              <h3 class="money">{{ item.couponAmount }}</h3>
              <p>优惠券</p>
            </div>
            <div class="midBox">
              <h4>{{ item.couponName }}</h4>
              <p>{{ item.remarks }}</p>
              <div>有效使期至：{{ item.expiredDate }}</div>
            </div>
            <div class="rightBox">
              <div class="bottomToMsgQuan">扫码使用</div>
            </div>
          </div>
        </van-tab>
        <van-tab title="已过期" name="5">
          <div class="quan" v-for="(item, index) in list" :key="index">
            <div class="leftBox">
              <span>￥</span>
              <h3 class="money">{{ item.couponAmount }}</h3>
              <p>优惠券</p>
            </div>
            <div class="midBox">
              <h4>{{ item.couponName }}</h4>
              <p>{{ item.remarks }}</p>
              <div>有效使期至：{{ item.expiredDate }}</div>
            </div>
            <div class="rightBox">
              <div class="bottomToMsgQuan">扫码使用</div>
            </div>
          </div>
        </van-tab>
      </van-tabs>

      <div class="noVip" v-if="userMsg.userType != 2">
        <img
          src="https://tsyx-rights-and-interests.oss-cn-hangzhou.aliyuncs.com/img/jihuo.png"
          alt=""
          @click="qurenzheng"
        />
      </div>
    </div>

    <div class="nowUse" v-if="status == 4" @click="togesangquan">再次购买</div>
  </div>
</template>

<script>
import req from "@/utils/index";
import { Dialog } from "vant";
export default {
  data() {
    return {
      url:
        "http://tsyx-rights-and-interests.oss-cn-hangzhou.aliyuncs.com/ceshi/banner1.png",
      activeName: "1",
      status: "",
      list: [],
      userMsg: {
        nickName: "",
        phoneNumber: "",
      },
      allNum: 0,
    };
  },
  methods: {
    getList(type, status) {
      req(
        "get",
        `/qy/user/coupon?pageNum=1&pageSize=999&status=${status}&type=${type}`,
        {}
      ).then((res) => {
        if (res.rspCode == "000000") {
          this.list = res.data;
        }
      });
    },
    getAllNum(type) {
      req("get", `/qy/user/coupon/num?type=${type}`, {}).then((res) => {
        if (res.rspCode == "000000") {
          // this.allNum = res.data.unused;
          console.log(res)
          if (this.activeName == 2) {
            this.allNum = res.data.unused;
          } else if (this.activeName == 3) {
            this.allNum = res.data.used;
          } else if (this.activeName == 5) {
            this.allNum = res.data.expired;
          }
        }
      });
    },
    // 非认证会员去认证
    qurenzheng() {
      this.$router.push({
        name: "upload",
      });
    },
    // 去格桑泉
    togesangquan() {
      this.$router.push({
        name: "posterNo2",
      });
    },
    // 去券
    toQuan(item) {
      this.$router.push({
        name: "quan",
        params: { item: JSON.stringify(item) },
      });
    },
  },
  created() {
    this.status = this.$route.params.id || this.$store.state.indexCardStatus;

    this.getList(this.status, this.activeName);
    this.getAllNum(this.activeName);
    this.userMsg = JSON.parse(window.localStorage.getItem("userMsg"));
    if (this.userMsg.userType == 0) {
      this.isright = this.$store.state.isright = false;
    } else {
      this.isright = this.$store.state.isright = true;
    }
    if (this.status == 4) {
      this.url =
        "https://tsyx-rights-and-interests.oss-cn-hangzhou.aliyuncs.com/ceshi/banner2.png";
    }

    if (this.status == 1 && this.userMsg.userType == 1) {
      Dialog.confirm({
        title: "温馨提示",
        message: "您还有11张油券暂未领取，是否领取？",
      })
        .then(() => {
          // on confirm
          this.qurenzheng();
        })
        .catch(() => {
          // on cancel
        });
    }
  },
  watch: {
    activeName() {
      this.getList(this.status, this.activeName);
      this.getAllNum(this.status);
    },
  },
};
</script>

<style lang='scss' scoped>
#indexCard {
}

.topBox {
  width: 90%;
  margin: 1rem auto;
  img {
    width: 100%;
  }
}

.msgBox {
  background-color: #fff;
  .top {
    position: relative;
    width: 90%;
    height: 2.3rem;
    margin: 1rem auto;
    .userIcon {
      position: absolute;
      left: 0.3rem;
      top: 0.3rem;
      width: 20%;
      img {
        width: 100%;
      }
    }
    .userName {
      position: absolute;
      left: 25%;
      top: 0.3rem;
      width: 35%;
      overflow: hidden;
      p {
        margin: 0;
      text-overflow: ellipsis;
      white-space: nowrap;
      overflow: hidden;
      }
      .name {
        font-size: 0.5rem;
        margin-top: 0.2rem;
      }
      .tel {
        font-size: 0.3rem;
        border-radius: 0.3rem;
        background-color: #b7b7b7;
        color: #666;
        padding: 0 0.1rem;
      }
    }
    .userCardNum {
      position: absolute;
      top: 50%;
      right: 1rem;
      transform: translateY(-50%);
      .num,
      p {
        text-align: center;
        margin: 0;
        padding: 0;
      }
      .num {
        font-size: 0.6rem;
        font-family: Helvetica;
        color: #dc4433;
      }
      p {
        font-family: PingFangSC, PingFangSC-Regular;
        font-weight: 400;
      }
    }
  }

  .quan {
    position: relative;
    width: 90%;
    height: 3rem;
    margin: 0.2rem auto;
    background-color: #f7f7f7;
    .leftBox {
      float: left;
      width: 25%;
      height: 3rem;
      text-align: center;
      padding-top: 0.8rem;
      box-sizing: border-box;
      color: #dc4433;
      .money {
        display: inline-block;
        margin: 0;
        padding: 0;
        font-size: 0.6rem;
      }
      p {
        margin: 0.1rem 0;
        padding: 0;
      }
    }
    .midBox {
      float: left;
      height: 3rem;
      width: 50%;
      text-align: left;
      padding-left: 0.4rem;
      box-sizing: border-box;
      h4 {
        margin: 0.7rem 0 0.1rem 0;
        font-size: 0.4rem;
      }
      p {
        margin: 0 0 0.1rem 0;
        font-size: 0.35rem;
        color: #dc4433;
      }
      div {
        color: #999;
        font-size: 10px;
      }
    }
    .rightBox {
      position: relative;
      float: left;
      width: 25%;
      height: 3rem;
      .bottomToMsgQuan {
        position: absolute;
        width: 60%;
        left: 50%;
        top: 50%;
        transform: translateX(-50%) translateY(-50%);
        padding: 0.3rem 0.2rem;
        background: linear-gradient(111deg, #cd2136 5%, #9e1129 88%);
        border-radius: 0.25rem;
        color: #feffff;
        text-align: center;
      }
    }
  }
  .noVip {
    width: 90%;
    margin: auto;
    img {
      width: 100%;
    }
  }
}
.nowUse {
  width: 90%;
  margin: auto;
  padding: 0.3rem 0;
  box-sizing: border-box;
  border: 1px solid #c41e33;
  color: #c41e34;
  border-radius: 0.7rem;
  font-weight: 700;
  font-size: 0.4rem;
  margin-top: 0.5rem;
  text-align: center;
}
</style>